{extend name="property/public/insidePageBase" /}
{block name="title"}编辑充电桩{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form  layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">宿 舍 筛 选</label>
                        <div class="layui-input-block">
                            <select name="property_id" lay-filter="property_id" lay-search>
                                <option value="">-请选择-</option>
                                {foreach $propertyData as $k=>$v}
                                <option value="{$v['id']}" {:isset($info['property_id']) ? $info['property_id'] == $v['id'] ? 'selected' : '' : ''}>{$v['name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">收费方案</label>
                        <div class="layui-input-block" id="piles_plan_show">
                            <input type="text" name="plan_id" disabled placeholder="请筛选物业" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label indispensable">设 备 编 号</label>
                <div class="layui-input-block">
                    <input type="text" name="sim_key" value="{$info['sim_key']??''}" placeholder="请输入设备SIM二维码编号" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">安 装 位 置</label>
                        <div class="layui-input-block">
                            <input type="text" name="piles_name" value="{$info['piles_name']??''}" placeholder="请输入设备安装位置或名称" autocomplete="off" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">端口数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="port_num" value="{$info['port_num']??''}" placeholder="端口数量" autocomplete="off" class="layui-input" maxlength="2" oninput="value=value.replace(/[^\d]/g,'');lessNum(this)"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">充电桩类型</label>
                        <div class="layui-input-block">
                            <select name="piles_type">
                                <option value="">--请选择--</option>
                                <option value="1" {:isset($info['piles_type']) ? $info['piles_type'] == 1 ? 'selected' : '' : ''}>两轮桩</option>
                                <option value="2" {:isset($info['piles_type']) ? $info['piles_type'] == 2 ? 'selected' : '' : ''}>四轮桩</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">输出类型</label>
                        <div class="layui-input-block">
                            <select name="out_type">
                                <option value="">--请选择--</option>
                                <option value="1" {:isset($info['out_type']) ? $info['out_type'] == 1 ? 'selected' : '' : ''}>交流输出</option>
                                <option value="2" {:isset($info['out_type']) ? $info['out_type'] == 2 ? 'selected' : '' : ''}>直流输出</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs10">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">详 细 地 址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" id="address" value="{$info['address']??''}" placeholder="请输入所属地址" class="layui-input" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <button class="layui-btn" type="button" id="map_location" style="width: 115px;background-color: #090e0e;"><i class="layui-icon layui-icon-location"></i>地图定位</button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark">{$info['remark']??''}</textarea>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <input type="hidden" name="longitude" id="longitude" value="{$info['longitude']??''}" />
                <input type="hidden" name="latitude" id="latitude" value="{$info['latitude']??''}" />
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="piles_plan_tpl" type="text/html">
    <select name="plan_id" lay-filter="plan_id" id="plan_id">
        <option value="">请选择</option>
        {{# layui.each(d.planList, function(index, elem) { }}
        <option value="{{elem.id}}" >{{elem.plan_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laytpl = layui.laytpl;
        form.on('select(property_id)', function(res) {
            let value = res.value
            loadPropertyPlan(value)
        })
        function loadPropertyPlan(propertyId) {
            $.get('{:request()->url()}', {property_id:propertyId,get_type:'planData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('piles_plan_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('piles_plan_show'); // 视图对象
                    laytpl(getTpl).render({planList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }

            })
        }
        $('#map_location').on('click', function() {
            parent.layer.open({
                type: 2,
                title: '定位',
                content: "/static/maplocation/index.html?lat="+$('input[name="latitude"]').val()+"&lng="+$('input[name="longitude"]').val(),
                area: ['90%', '90%'],
                btn: ['确认','取消'],
                yes: function(index, layero){
                    choseeArea = parent.window.frames['layui-layer-iframe'+index].choseeArea;
                    if(choseeArea === undefined) {
                        return parent.layer.msg('请选择地区');
                    }
                    $('#address').val(choseeArea.regeocode.formattedAddress);
                    $('#latitude').val(choseeArea.lnglat.lat);
                    $('#longitude').val(choseeArea.lnglat.lng);
                    console.log(choseeArea);
                    parent.layer.close(index);
                }
            });
        });
    });
</script>
{/block}